<template>
    <!-- Trigger Start -->
    <view @click="showPop = true">
        <card>
            <view class="flex justify-between padding">
                <view class="normal"> 请选择数量 </view>
                <view class="text-base normal">
                    <text class="mr-[20rpx]">x{{ goodsNum }}</text>
                    <u-icon name="arrow-right" color="#707070" size="22"></u-icon>
                </view>
            </view>
            <view class="flex justify-between padding margin_top">
                <view class="normal"> 请选择规格 </view>
                <view class="text-base normal">
                    <text class="mr-[20rpx]">{{ goodItem.name }}</text>
                    <u-icon name="arrow-right" color="#707070" size="22"></u-icon>
                </view>
            </view>
        </card>
    </view>
    <!-- Trigger End -->

    <u-popup v-model="showPop" height="860" mode="bottom" border-radius="32" :closeable="true" @close="showPop = false"
        :safe-area-inset-bottom="true">
        <view class="p-[25rpx]" style="padding-top: 50rpx">
            <!-- Header Start -->
            <view class="flex col-start">
                <view @click="previewImage(0)">
                    <u-image :src="goodsImage[0]" width="200" height="200" border-radius="16rpx"></u-image>
                </view>

                <view class="m-[20rpx]">
                    <view class="text-xl font-medium normal">{{ goodsName }}</view>
                    <view class="text-primary mt-[10rpx]">
                        <text class="font-medium font-40" style="color: red" v-if="isnameincludes">{{
                            (parseFloat(props.priceTitle) * goodsoutNumber).toFixed(2) }}</text>
                        <text class="font-medium font-40" style="color: red" v-else>{{
                            parseFloat(props.priceTitle)
                            }}</text>
                        <text class="text-xs mt-[20rpx]">{{
                            localUnitDesc != '' ? localUnitDesc : unitDesc
                            }}</text>
                    </view>
                </view>
            </view>
            <!-- Header End -->

            <!-- Main Start -->
            <view class="mt-[44rpx] flex justify-between">
                <view>数量</view>
                <view>
                    <u-number-box bgColor="transparent" :min="1" v-model="goodsNum"></u-number-box>
                </view>
            </view>
            <view class="mt-[44rpx] flex justify-between" style="display: flex">
                <view style="width: 60rpx">规格</view>
                <view class="" style="
                        width: calc(100% - 60rpx);
                        display: flex;
                        flex-wrap: wrap;
                        flex-direction: row;
                    ">
                    <view style="margin: 0 10rpx; margin-bottom: 40rpx" v-for="(item, index) in goodsList"
                        :key="'item' + index" @click="clickgoodsList(item)">
                        <!-- <uni-tag :text="item.name"  :inverted="item.id==primaryid?'':''"  type="primary"/> -->
                        <!-- {{goodItem.goodsSpecificationId}}
					{{item.goodsSpecificationId}} -->
                        <uni-tag :text="item.name" :custom-style="{
                            'background-color':
                                goodItem.id == item.id
                                    ? 'rgba(132, 86, 255, 1)'
                                    : 'rgba(249, 249, 249, 1)',
                            'border-color':
                                goodItem.id == item.id
                                    ? 'rgba(132, 86, 255, 1)'
                                    : 'rgba(249, 249, 249, 1)',
                            color:
                                goodItem.id == item.id
                                    ? 'rgba(255, 255, 255, 1)'
                                    : 'rgba(34, 34, 34, 1)'
                        }">
                        </uni-tag>
                    </view>
                </view>
            </view>
            <view class="mt-[44rpx] flex justify-between" v-if="isnameincludes">
                <view>{{ isgoodsName1 }}</view>
                <view>
                    <u-number-box bgColor="transparent"
                        :min="props.goodsoutNumber > 0 ? props.goodsoutNumber : isnameinNumber"
                        v-model="goodsoutNumber"></u-number-box>
                </view>
                <view>{{ isgoodsName2 }}</view>
            </view>

            <!-- Main End -->

            <!-- Footer Start -->
            <view class="footer">
                <button class="bg-primary text-lg text-white leading-[80rpx] h-[80rpx]" @click="onClick">
                    {{ btntext }}
                </button>
            </view>
            <!-- Footer End -->
        </view>
    </u-popup>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, onMounted, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import Card from './card.vue'
import { apispecification } from '@/api/goods'

const emit = defineEmits(['confirm'])
const primaryid = ref<number>(-1)
const props = withDefaults(
    defineProps<{
        goodsImage: any // 商品图片
        goodsName: string // 商品名称
        goodsPrice: string // 商品价格
        goodsList: any //产品规格
        unitDesc: string // 商品单位
        goodsoutNumber: any // 商品单位
        buyNumber: number
        priceTitle: any
        opid: any
    }>(),
    {
        goodsImage: [],
        goodsName: '',
        goodsPrice: '',
        goodsList: [],
        unitDesc: '',
        goodsoutNumber: 0,
        buyNumber: 0,
        priceTitle: 0,
        opid: ''
    }
)
const goodItem = reactive<{
    name: string
    price: number
    goodsSpecificationId: number
    id: number
}>({
    name: '',
    price: 0,
    goodsSpecificationId: 0,
    id: 0
})

// 定义一个本地的响应式变量来存储 unitDesc 的值
const localUnitDesc = ref<string>(props.unitDesc)

const goodsNum = ref<number>(1)
const showPop = ref<boolean>(false)
// 是否超出
const isnameincludes = ref<boolean>(false)

const isnameinNumber = ref<number>(200)

// 超出名称-单价
const isgoodsName1 = ref<string>('')
const isgoodsName2 = ref<string>('')
// 超出数量
const goodsoutNumber = ref<number>(1)
const goodsprice = ref<number>(0)
const btntext = ref('确认预约')
// const goodsImg = computed(() => props.goodsImage[0] || {})

// 立即预约
const onClick = () => {
    console.log(goodItem.id)

    if (goodItem.id) {
        if (isnameincludes.value) {
            emit('confirm', goodsNum.value, goodItem.id, goodsoutNumber.value)
        } else {
            emit('confirm', goodsNum.value, goodItem.id, 1)
        }
    } else {
        console.log('没有选择规格，不允许点击按钮')
    }
}
// 查看商品图片
const previewImage = (current: number) => {
    uni.previewImage({
        current,
        urls: props.goodsImage.map((el: any) => el)
    })
}
// 查看商品图片
const clickgoodsList = (goodsItem: any) => {
    console.log(goodsItem)
    goodsItem.buyNumber = props.buyNumber
    localUnitDesc.value =
        '/' + (goodsItem.name.includes('>') ? goodsItem.name.match(/[^\d>]+/)[0] : goodsItem.name)
    if (goodsItem.name.includes('>')) {
        isnameincludes.value = true

        const name_list = goodsItem.name.split('>')
        console.log(name_list)
        if (name_list.length > 0) {
            isgoodsName1.value = '请输入' + name_list[1] + '以上'
            const digits = name_list[1].match(/\d+/)
            isnameinNumber.value = digits
            if (digits) {
                goodsoutNumber.value = parseInt(digits[0], 10)
            }
        }
        /*  goodsoutNumber.value = props.goodsoutNumber;
    goodsprice.value = goodsItem.price; */
        setpropsunitDesc()
    } else {
        isnameincludes.value = false
    }
    console.log('goodsItem')
    // goodsPrice=goodsItem.price
    goodItem.name = goodsItem.name

    goodItem.goodsSpecificationId = goodsItem.goodsSpecificationId
    goodItem.id = goodsItem.id
    console.log(goodsItem)

    const isBuyFlag = uni.getStorageSync('isBuyFlag')
    console.log('isBuyFlag')
    console.log(isBuyFlag)
    if (isBuyFlag == 1) {
        uni.$emit('updatepriceTitle', goodsItem.buyNumber)
        goodItem.price = goodsItem.buyNumber
    } else {
        uni.$emit('updatepriceTitle', goodsItem.price)
        goodItem.price = goodsItem.price
    }
}
// 查看商品图片

const setpropsunitDesc = () => {
    props.goodsPrice = goodsoutNumber.value * goodsprice.value + ''
}

// 暴露组件值
defineExpose({
    showPop
})
// 规格
const getspecification = () => {
    try {
        const params = {
            goodsId: props.opid
        }
        apispecification(params).then((res) => {
            console.log(res, 'res')

            goodItem.name = res.lists[0].name
            goodItem.price = res.lists[0].price
            goodItem.goodsSpecificationId = res.lists[0].goodsSpecificationId
            goodItem.id = res.lists[0].id
        })
    } catch (error) {
        console.log('请求规格异常', error)
    }
}
// 在mounted时设置第一个规格为默认选中, 默认选中
onMounted(() => {
    const index = props.goodsList.length
    localUnitDesc.value = props.unitDesc
    if (index >= 1) {
        goodItem.name = props.goodsList[index - 1].name
        goodItem.price = props.goodsList[index - 1].price
        goodItem.goodsSpecificationId = props.goodsList[index - 1].goodsSpecificationId
        goodItem.id = props.goodsList[index - 1].id
    }
    console.log(props.goodsList[index - 1])
    console.log('props.goodsList[index-1]')
})
onLoad(() => {
    /*  if (props.goodsList.length >= 1) {
    goodItem.name = props.goodsList[0].name;
    goodItem.price = props.goodsList[0].price;
    goodItem.goodsSpecificationId = props.goodsList[0].goodsSpecificationId;
    goodItem.id = props.goodsList[0].id;
  } */
    getspecification()
    const isBuyFlag = uni.getStorageSync('isBuyFlag')
    if (isBuyFlag == 1) {
    }
    const isscanCode = uni.getStorageSync('isscanCode')
    if (isscanCode == '1') {
        btntext.value = '确认'
    }
})
</script>
<style lang="scss" scoped>
.padding {
    padding: 0 30rpx;
}

.margin_top {
    margin-top: 50rpx;
}

// 底部按钮
.footer {
    left: 0;
    bottom: 0;
    width: 100%;
    position: fixed;
    padding: 20rpx 30rpx;
    background-color: #ffffff;
    box-shadow: 2rpx 2rpx 22rpx rgba($color: #000000, $alpha: 0.2);
    padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
}

.bg-primary {
    background-color: #0000 !important;
    background: url('http://mzd-admin.muzhandao.com/api/uploads/image/20240905/f6713e26-7427-4e71-b80a-da1d7388d4bc.png');
    background-size: 100% 100%;
}
</style>
